<template>
  <div>
    <header class="main-header">
      <div class="topbar">
        <div class="container">
          <div class="main-logo">
            <a href="/index.html" class="logo">
              <img
                src="/assets/images/favicons/favicon.png"
                width="105"
                alt=""
              />
            </a>
            <div class="mobile-nav__buttons">
              <a href="#" class="search-toggler"
                ><i class="organik-icon-magnifying-glass"></i
              ></a>
              <a href="#" class="mini-cart__toggler"
                ><i class="organik-icon-shopping-cart"></i
              ></a>
            </div>
            <span class="fa fa-bars mobile-nav__toggler"></span>
          </div>

          <div class="topbar__left">
            <div class="topbar__social">
              <a
                href="http://wpa.qq.com/msgrd?v=3&uin=1781869529&site=qq&menu=yes"
                target="_blank"
                class="fab fa-qq"
              ></a>
              <a
                href="http://wpa.qq.com/msgrd?v=3&uin=1781869529&site=qq&menu=yes"
                target="_blank"
                class="fab fa-weixin"
              ></a>
              <a
                href="http://wpa.qq.com/msgrd?v=3&uin=1781869529&site=qq&menu=yes"
                target="_blank"
                class="fab fa-weibo"
              ></a>
            </div>
            <div class="topbar__info">
              <i class="organik-icon-email"></i>
              <p>
                给我发邮件
                <a href="mailto://m15107193512@yeah.net"
                  ><span
                    class="__cf_email__"
                    data-cfemail="90f9fef6ffd0ffe2f7f1fef9fbbef3fffd"
                    >[m15107193512@yeah.net]</span
                  ></a
                >
              </p>
            </div>
          </div>

          <div class="topbar__right">
            <div class="topbar__info">
              <i class="organik-icon-calling"></i>
              <p>电话 <a href="tel:+92-666-888-0000">92 666 888 0000</a></p>
            </div>
            <div class="topbar__buttons">
              <a href="#" class="search-toggler"
                ><i class="organik-icon-magnifying-glass"></i
              ></a>
              <a href="#" class="mini-cart__toggler"
                ><i class="organik-icon-shopping-cart"></i
              ></a>
            </div>
          </div>
        </div>
      </div>
      <nav class="main-menu">
        <div class="container">
          <div class="main-menu__login">
            <router-link :to="url"
              ><i class="organik-icon-user"></i
              >{{
                currentUser != null ? currentUser : "登录 / 注册"
              }}</router-link
            >
          </div>
          <ul class="main-menu__list">
            <li class="dropdown">
              <a
                href="/index.html"
                tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/index.html"
                >首页</a
              >
              <ul>
                <li>
                  <a
                    href="/index.html"
                    tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/index.html"
                    >Home One</a
                  >
                </li>
                <li>
                  <a
                    href="/index-2.html"
                    tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/index-2.html"
                    >Home Two</a
                  >
                </li>
                <li class="dropdown">
                  <a href="#">Header Styles</a>
                  <ul>
                    <li>
                      <a
                        href="/index.html"
                        tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/index.html"
                        >Header One</a
                      >
                    </li>
                    <li>
                      <a
                        href="/index-2.html"
                        tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/index-2.html"
                        >Header Two</a
                      >
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a
                href="/about.html"
                tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/about.html"
                >关于</a
              >
            </li>
            <li class="dropdown">
              <a
                href="/products.html"
                tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/products.html"
                >购物</a
              >
              <ul>
                <li>
                  <a
                    href="/products.html"
                    tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/products.html"
                    >商品页面</a
                  >
                </li>
                <!-- <li>
                  <a
                    href="/product-details.html"
                    tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/product-details.html"
                    >商品细节</a
                  >
                </li> -->
                <li>
                  <a
                    href="/cart.html"
                    tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/cart.html"
                    >购物车</a
                  >
                </li>
                <!-- <li>
                  <a
                    href="/checkout.html"
                    tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/checkout.html"
                    >商品结算</a
                  >
                </li> -->
              </ul>
            </li>
            <li class="dropdown">
              <a
                href="/news.html"
                tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/news.html"
                >新闻</a
              >
              <ul>
                <li>
                  <a
                    href="/news.html"
                    tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/news.html"
                    >News</a
                  >
                </li>
                <li>
                  <a
                    href="/news-details.html"
                    tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/news-details.html"
                    >News Details</a
                  >
                </li>
              </ul>
            </li>
            <li>
              <a
                href="/contact.html"
                tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/contact.html"
                >联系</a
              >
            </li>
          </ul>
          <!-- <div class="main-menu__language">
            <img
              src="/assets/images/resources/flag-1-1.jpg"
              tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/assets/images/resources/flag-1-1.jpg"
              alt=""
            />
            <label class="sr-only" for="language-select">select language</label>

            <select class="selectpicker" id="language-select-header">
              <option value="english">English</option>
              <option value="arabic">Arabic</option>
            </select>
          </div> -->
        </div>
      </nav>
    </header>
    <div class="stricky-header stricked-menu main-menu">
      <div class="sticky-header__content"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      currentId: localStorage.getItem("UID"),
      currentUser: localStorage.getItem("NAME"),
      url: "#",
    };
  },
  watch: {
    "$store.state.user": {
      handler() {
        this.changeUrl();
      },
      deep: true,
    },
  },
  mounted() {
    this.changeUrl();
  },
  methods: {
    changeUrl() {
      console.log("change");
      this.currentUser = localStorage.getItem("NAME");
      if (this.currentUser == null) {
        this.url = "/login.html";
      } else if (this.currentUser == "root") {
        this.url = "/dashboard/user";
      } else {
        this.url = "/user/center";
      }
    },
  },
};
</script>>
